import React from "react";
import { Searchfor, Checked } from "@ct0/icons";
import Menu, { Item as MenuItem } from "rc-menu";
import { SelectInfo } from "rc-menu/lib/interface";
import { SelectOptions } from "../type";
import classNames from "classnames";

interface Props {
  options: SelectOptions;
  selectedKeys: Array<string>;
  search?: boolean;
  inputVal?: string;
  allowClearAll?: boolean;
  allowSelectAll?: boolean;
  clearAll: () => void;
  selectAll: () => void;
  onInputValChange: (e: any) => void;
  onSelect: (value: SelectInfo) => void;
  notFoundContent?: React.ReactNode;
}

function Overlay({
  options,
  selectedKeys,
  search,
  inputVal,
  allowSelectAll,
  allowClearAll,
  clearAll,
  selectAll,
  onInputValChange,
  onSelect,
  notFoundContent = "暂无数据",
}: Props) {
  return (
    <div className="ct0-select-dropdown-container">
      {search && (
        <div className="filter-input">
          <input
            type="text"
            onChange={onInputValChange}
            role="search-input"
            value={inputVal ?? ""}
          />
          <span className="icon">
            <Searchfor />
          </span>
        </div>
      )}
      {options?.length > 0 ? (
        <>
          <Menu
            prefixCls="ct0-select-menu"
            multiple={true}
            className="dropdown-menu"
            onSelect={onSelect}
            selectedKeys={selectedKeys}
            onDeselect={onSelect}
          >
            {options.map((option) => {
              const checked = selectedKeys.indexOf(String(option?.value)) > -1;
              return (
                <MenuItem
                  key={option?.value}
                  className={classNames("menu-list-item", { checked: checked })}
                  disabled={option?.disabled}
                  role="option"
                >
                  <div>
                    <span>{option?.label}</span>
                    {option?.icon}
                  </div>
                  {checked && <Checked />}
                </MenuItem>
              );
            })}
          </Menu>
        </>
      ) : (
        <span className="ct0-select-option-empty">{notFoundContent}</span>
      )}
      {(allowClearAll || allowSelectAll) && (
        <div className="ct0-select-footer-buttons">
          {allowClearAll && (
            <span onClick={clearAll} className="ct0-select-footer-button">
              清除已选项
            </span>
          )}
          {allowSelectAll && (
            <span
              onClick={selectAll}
              className={classNames("ct0-select-footer-button", {
                disabled: selectedKeys.length === options.length,
              })}
            >
              全选
            </span>
          )}
        </div>
      )}
    </div>
  );
}

export default Overlay;
